// 页面滚动展示导航
(function(window, document) {
    const banner = document.querySelector('.banner')
    const navR = document.querySelector('.navRight')
    window.addEventListener('scroll', function() {
        navR.style.display = document.documentElement.scrollTop > banner.offsetTop ? 'block' : 'none'
        navR.style.opacity = document.documentElement.scrollTop > banner.offsetTop ? 1 : 0
    })
})(window, document);
// 点击跳转至各区域功能
(function(window, document) {
    const navR = document.querySelector('.navRight')
    const comput = function(e) {
            if (e.target.nodeName === 'A') {
                // console.log('object :>> ', document.querySelector(`.${e.target.dataset.pathto}`).offsetTop)
                // console.log('html卷去高度 :>> ', document.documentElement.scrollTop);
                // 实际相对距离=元素所在位置-当前文档所在位置
                const lenthPX = document.querySelector(`.${e.target.dataset.pathto}`).offsetTop - document.documentElement.scrollTop
                scrollToEle(lenthPX, 1, e)
            } else if (e.target.nodeName === 'I') {
                //当点击到i返回顶部字体图标时，直接返回顶部
                const lenthPX = -document.documentElement.scrollTop
                scrollToEle(lenthPX, 1, e)
            }
        }
        //设置额外的事件，以防止a标签默认行为
    navR.addEventListener('click', function(e) {
        e.preventDefault()
    })
    navR.addEventListener('click', comput)

    function scrollToEle(realPX, time, e) {
        if (e.target.dataset.pathto && e.target.dataset.pathto !== 'shortcut') {
            document.querySelector('.navRight ul li a.active').classList.remove('active')
        }
        // 单位速度=距离/单位时间
        // 当距离过近时则退出滚动动画函数
        if (Math.abs(realPX) <= 20) {
            console.log('SB就在面前你跳个勾八');
            return
        }
        navR.removeEventListener('click', comput) //运行动画前防抖处理，去除元素的点击事件
        const speed = realPX / ((time * 1000 + 8 * time) / 16)
        const timer = setInterval(() => {
            document.documentElement.scrollTop += speed //以16ms为单位进行动画，确保每秒动画帧数在63帧左右
        }, 16)
        const timerOut = setTimeout(() => {
            if (e.target.dataset.pathto && e.target.dataset.pathto !== 'shortcut') {
                e.target.classList.add('active')
            }
            clearInterval(timer)
            clearTimeout(timerOut) //动画结束时同时清除两个计时器
            navR.addEventListener('click', comput) //运行动画后防抖处理，重新添加元素的点击事件
        }, time * 1000 + 8 * time);

    }
})(window, document)